<template>
  <div class="sp">
    <section style="margin-bottom: 50px">
      <Table
        :tableData="paneB.tableDataF"
        selection
        @selectionChange="handleSelectionChange"
        @btnClick="handleClick"
      ></Table>
      <Pagination :total="paneB.tableDataF.row.length" />
    </section>

    <el-dialog
      title="流程"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
    >
      <el-steps :space="200" :active="4" finish-status="success" align-center>
        <el-step title="创建"></el-step>
        <el-step title="总部业务管理员审批"></el-step>
        <el-step title="平台开通"></el-step>
        <el-step title="归档"></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="流程"
      :visible.sync="dialogVisibleA"
      width="50%"
      append-to-body
    >
      <el-steps
        :space="200"
        :active="active"
        finish-status="success"
        align-center
      >
        <el-step title="创建"></el-step>
        <el-step title="HSS平台成员开通"></el-step>
        <el-step title="双跨融合通信平台成员开通"></el-step>
        <el-step title="归档"></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleA = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Table,
    Pagination
  },
  data() {
    return {
      active: 1,
      dialogVisible: false,
      dialogVisibleA: false,
      paneB: {
        tableDataF: {
          col: [
            {
              prop: 'colB',
              label: '订单编号'
            },
            {
              prop: 'colE',
              label: '客户名称'
            },
            {
              prop: 'colA',
              label: '业务名称'
            },
            {
              prop: 'colD',
              label: '当前环节',
              width: '160px'
            },
            {
              prop: 'colF',
              label: '创建时间'
            },
            {
              prop: 'colG',
              label: '操作',
              type: 'Button',
              width: '400px',
              btnList: [
                {
                  label: '查看流程图'
                },
                {
                  label: '添加成员',
                  isShow: val => {
                    return val.colD !== '已归档'
                  }
                },
                {
                  label: '添加产品',
                  isShow: val => {
                    return val.colD !== '已归档'
                  }
                }
              ]
            }
          ],
          row: [
            {
              colA: '集团固话',
              colB: 'D564521',
              colC: '市场部',
              colD: '已归档',
              colE: '方石集团',
              colF: this.$baseFunc.dateFormat('YYYY-mm-dd', new Date())
            },
            {
              colA: '集团固话',
              colB: 'D564520',
              colC: '集团客户部',
              colD: '总部业务管理员审批',
              colE: '大石集团',
              colF: '2020.11.11'
            },
            {
              colA: '集团固话',
              colB: 'D564519',
              colC: '集团客户部',
              colD: '总部业务管理员审批',
              colE: '云栖集团',
              colF: '2020.11.11'
            },
            {
              colA: '集团固话',
              colB: 'D564518',
              colC: '集团客户部',
              colD: '总部业务管理员审批',
              colE: '郁南集团',
              colF: '2020.11.11'
            }
          ]
        }
      },
      indexArr: []
    }
  },
  created() {
    this.$bus.$on('donecy', () => {
      this.paneB.tableDataF.row.unshift({
        colA: '集团固话成员',
        colB: 'D564522',
        colC: '市场部',
        colD: '开通中',
        colE: '方石集团',
        colF: this.$baseFunc.dateFormat('YYYY-mm-dd', new Date())
      })
    })
    this.$bus.$on('donecp', () => {
      this.paneB.tableDataF.row.unshift({
        colA: '多媒体会议',
        colB: 'D564523',
        colC: '市场部',
        colD: '开通中',
        colE: '方石集团',
        colF: this.$baseFunc.dateFormat('YYYY-mm-dd', new Date())
      })
    })
  },
  methods: {
    handleSelectionChange(val) {
      val.forEach(itemA => {
        this.paneB.tableDataF.row.forEach((itemB, index) => {
          if (itemA.colB === itemB.colB) {
            this.indexArr.push(index)
          }
        })
      })
    },
    delArrItem() {
      this.indexArr.forEach(item => {
        this.paneB.tableDataF.row.splice(item, 1)
      })
      this.indexArr = []
    },
    handleClick(index, { row }) {
      console.log(row)
      if (index === 0) {
        if (row.colA !== '集团固话成员') {
          this.dialogVisible = true
        } else {
          this.dialogVisibleA = true
          setInterval(() => {
            this.active++
          }, 1500)
        }
      }
      if (index === 1) {
        this.$bus.$emit('addcy', true)
      }
      if (index === 2) {
        this.$bus.$emit('addcp', true)
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
